﻿/* Usage:
    $('selecter').selecter({
        "container": "#container",
        "result": "#result_container",
        "option": "#option_container",
        "onChange": function(txt){}
    });
*
*/
(function($) {
    $.fn.selecter = function(configuration) {
        var _default = {
            "container": "",
            "result": "",
            "option": "",
            "speed": "fast",
            "onChange": function(txt) { }
        };
        var _configuration = $.extend({}, _default, configuration);

        function hideOptions(result_container, option_container, speed) {
            if (result_container.hasClass("select_open")) {
                option_container.slideUp(speed);
                result_container.removeClass("select_open");
                $(document).unbind("click", hideOptions);
            }
        }

        function showOptions(result_container, option_container, speed) {
            $(document).bind("click", speed, hideOptions);
            option_container.slideDown(speed);
            result_container.addClass("select_open");
        }

        $(this).each(function() {
            var that = $(this);
            var _container = $(_configuration.container);
            var _result_container = _container.find(_configuration.result);
            var _option_container = _container.find(_configuration.option);
            var _speed = _configuration.speed;
            var isOpened = false;
            var _onChange = _configuration.onChange;

            _option_container.hide();

            //绑定事件
            _result_container.click(function(e) {
                if (isOpened) {
                    if (_result_container.hasClass("select_open")) {
                        _option_container.slideUp(_speed);
                        _result_container.removeClass("select_open");
                        isOpened = false;
                        //$(document).unbind("click", hideOptions);
                    }
                } else {
                    //$(document).bind("click", speed, hideOptions);
                    _option_container.slideDown(_speed);
                    _result_container.addClass("select_open");
                    isOpened = true;
                }
            }).hover(
				function() {
				    $(this).addClass('select_result_hover');
				},
				function() {
				    $(this).removeClass('select_result_hover');
				}
			);
            _option_container.find('li').click(function(e) {
                var txt = $(this).text();
                _result_container.text(txt);
                //hide
                if (_result_container.hasClass("select_open")) {
                    _option_container.slideUp(_speed);
                    _result_container.removeClass("select_open");
                    isOpened = false;
                }
                _onChange.call(this, txt);
            }).hover(
				function() {
				    $(this).addClass("select_option_hover");
				},
				function() {
				    $(this).removeClass("select_option_hover");
				}
			);
        });
    }
})(jQuery);